<template>
    <section style="height: 100%;background: #fff;">
      <header></header>
      <div style="box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
        <yd-cell-item>
          <span slot="left">原注册号码</span>
          <yd-input slot="right" v-model="input8"  readonly style="padding-left: .4rem" :show-clear-icon="false"></yd-input>
        </yd-cell-item>
      <yd-cell-item>
        <span slot="left">输入验证码</span>
        <input type="text" slot="right" placeholder="请输入验证码" style="padding-left: .4rem" v-model="yanzhengId">
        <yd-sendcode slot="right"
                     v-model="start1"
                     @click.native="sendCode1"
                     type="warning"
        ></yd-sendcode>

      </yd-cell-item>
      </div>

      <yd-button size="large" type="danger"  class="sure_btn" @click.native="sureBtn()">下一步</yd-button>
    </section>
</template>

<script>
  export default {
    name:'changeMobile',
    data() {
      return {
        start1: false,
        input8:'',
        yanzhengId:'',
        code:'',
      }
    },
    methods: {
      sendCode1() {
        let that = this;
        this.$dialog.loading.open('发送中...');
        this.$ajax.post(window.g.apiUrl+'/util/message.do',JSON.stringify({
          phone:this.input8,
          flag:"3"
        }))
          .then((response)=>{
            setTimeout(() => {


              that.$dialog.loading.close();

              if(response.data.code == 200){
                that.start1 = true;
                that.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 1500
                });
                that.code = response.data.data;
              }else{
                that.$dialog.toast({
                  mes: '验证码发送次数过多，请稍后重试',
                  icon:'error',
                  timeout: 1500,
                });
              }

            }, 500);


          }).catch(()=>{
        })

      },
      sureBtn(){
        if(this.yanzhengId == ''){
          this.$dialog.notify({
            mes: '请输入验证码',
            timeout: 1500,
          });
          return;
        }

        if(this.yanzhengId != this.code){
          this.$dialog.notify({
            mes: '验证码输入有误',
            timeout: 1500,
          });
          return;
        }

        this.$router.push('/bind_mobile');
      }
    },
    created(){
      const that = this;
      let userid = localStorage.getItem('userid');

      this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
        .then((response)=>{
          if(response.data.code != 200){
            this.$dialog.notify({
              mes: '登录失效，正在跳转至登录页面',
              timeout: 1500,
              callback:()=>{
                that.$router.push('/login');
              }
            });
          }
        }).catch(()=>{
      })

      this.$ajax.post(window.g.apiUrl+'/user/getUser.do',JSON.stringify({
        id:userid,
      })).then((response)=>{
        that.input8 = response.data.data.phone;
      }).catch(()=>{
      })
    }
  }
</script>

<style scoped>
  header{
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/mine/mobile_bg.png");
    background-size: 100% 100%;
  }
  .sure_btn{
    position: fixed;
    bottom: 25px;
    width: 96%;
    margin-left: 2%;
  }

</style>
